<template>
    <div>
        <commpVxeTable
            :key="reCommpVxeTable"
            :config="dataTableConfig"
            :columns="columnsVxe"
            :formItem="formItem"
            @checkboxChange="checkboxChange"
            ref="administrativeOffice"
            @searchEvent="searchEvent"
            @resetEvent="resetEvent"
            >
            <template v-slot:fggbt_slots="{row}" data-desc="公告标题">
              <div style="text-align: left;">
                <!-- <a-icon type="fire" v-if="row.fsfzd == 1" style="color: red;float: inline-start;font-size: 20px;margin-left: 10px;"/> -->
                <a-icon type="vertical-align-top" v-if="row.fsfzd == 1" style="color: red;float: inline-start;font-size: 20px;width: 30px;"/>
                <div v-else style="width: 30px !important;height: 10px;padding-right: 10px;display: inline-block;"></div>
                <!-- <a-icon type="arrow-up" v-if="row.fsfzd == 1" style="color: red;float: inline-start;font-size: 20px;margin-left: 10px;"/>
                <a-icon type="notification" v-if="row.fsfzd == 1" style="color: red;float: inline-start;font-size: 20px;margin-left: 10px;"/>
                <a-icon type="sound" v-if="row.fsfzd == 1" style="color: red;float: inline-start;font-size: 20px;margin-left: 10px;"/> -->
                <a href="#" @click="reviseClick(row)">
                  {{ row.fggbt }}
                </a>
              </div>
            </template>
        </commpVxeTable>
        <addAndEditModal ref="addAndEditModalRef" :formObj="formObj"></addAndEditModal>
    </div>
</template>
<script>
import  assessCheckApi  from './service/api.js'
import  commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import  addAndEditModal  from './addAndEdit.vue'
export default {
    components: {
        commpVxeTable,
        addAndEditModal
    },
    props:{
    },
    data() {
        return {
            stepNums: 0,
            reCommpVxeTable: '',
            dataTableConfig: {
                api: assessCheckApi.queryPageYxNotice,
                rowId: 'id',
                paramet: {}
            },
            columnsVxe: [
                {
                    type: 'checkbox',
                    width: 60,
                    fixed: 'left'
                },{
                    title: '公告标题',
                    field: 'fggbt',
                    // align: 'left',
                    slots: {
                    // 使用插槽模板渲染
                        default: 'fggbt_slots',
                    },
                },
                // {
                //     title: '公告内容',
                //     field: 'fggnr',
                // },{
                //     title: '是否置顶',
                //     field: 'fsfzd',
                //     slots: {
                //     // 使用插槽模板渲染
                //         default: 'isTop_btn',
                //     },
                // },
                {
                    title: '发布人名称',
                    field: 'ffbrmc',
                    width: 150,
                },{
                    title: '发布时间',
                    field: 'ffbsj',
                    width: 200,
                },
                // {
                //     title: '有效状态',
                //     field: 'fyxzt',
                //     width: 100,
                // },
                // {
                //     title: '操作',
                //     field: 'id',
                //     width: 200,
                //     slots: {
                //     // 使用插槽模板渲染
                //         default: 'operation_btn',
                //     },
                // }
            ],
            formItem: [
                {
                    label: '公告标题',
                    model: 'fggbt',
                },{
                    label: '发布时间',
                    model: ['startTime','endTime'],
                    type: 'rangePicker',
                    format: 'YYYY-MM-DD'
                },
            ],
            idList: [],
            formObj: {},
        }
    },
    methods: {
        // 勾选
        checkboxChange(val){
            //console.log('已选择',val)
            this.idList = []
            if(val.length){
                val.forEach(item => {
                    this.idList.push(item.id)
                });
            }
        },
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 重置
        resetEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 查看
        reviseClick(row){
            // //console.log('办理',row)
            this.formObj = {
                title: row.fggbt,
                id: row.id,
                type: 'view'
            }
            this.$nextTick(_ => {
                this.$refs.addAndEditModalRef.editorVisible = true
            })
        },
    },
}
</script>
<style>
    .red-btn{
        color: #fff !important;
        border: 1px solid #ed5565 !important;
        background-color: #ed5565 !important;
    }
</style>
